<template>
  <div class="app-container">
    <HomeHeader ></HomeHeader>
    <HomeSwiper :list="swiperList"></HomeSwiper>
    <home-icons :iconlist="iconList"></home-icons>
    <Recommend class="Recommend-box" :recommendlist="recommendList"></Recommend>
    <weekend class="Weekend-box"></weekend>
  
  </div>
</template>

<script>
import HomeHeader from './components/Home/HomeHeader.vue'
import HomeSwiper from './components/Home/HomeSwiper.vue'
import HomeIcons from './components/Home/Icons.vue'
import Recommend from './components/Home/Recommend.vue'
import Weekend from './components/Home/Weekend.vue'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name:'Home',
  components:{
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    Recommend,
    Weekend,
  },
  computed:{
    ...mapState(['city'])
  },
  data(){
    return {
      swiperList : [],
      iconList : [],
      recommendList : [],
      lastCity :[]
    }
  },
  methods:{
    getHomeInfo(){
      axios.get('/static/mock/index.json?city' + this.city)//请求的路径
        .then(this.getHomeInfoSucc)//请求的回调
    },
    getHomeInfoSucc(res){
      res = res.data
      console.log(res)
      if(res.ret && res.data){//ret,请求的状态true,false，res，请求的结果对象
        const data = res.data
        this.swiperList =data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        //请求成功后的回调，将请求的数据赋值给data中定义的空数据对象，
        //然后通过属性绑定的形式，将数据对象与属性关联
        //属性名在子组件中通过props对象接收，同时规定数据的类型
        //然后通过v-for，循环数据对象并进行数据绑定
      }
      
    }
    },
     mounted() {
       this.lastCity = this.city
      this.getHomeInfo()
  },
  activated(){
    if (this.lastCity !== this.city) {
      this.lastCity =this.city
      this.getHomeInfo()
    }
  }
}
</script>


<style lang="stylus" scoped>
.app-container{
  .routerViewCon{
    position absolute
    top 0
    left 0
}
  }  
      
</style>
